<template>
	<navbar title="报名信息" :isBack="true"></navbar>
	<loading v-if="!data.info"></loading>
	<template v-else>
		<view class="content" :style="{ minHeight: tools.clientTopHight() }">
			<!-- 基本信息 -->
			<!-- <basic :info="data.info"></basic> 由于立即报名和确认不报名样式不一需要分开 -->
			<basicReady :info="data.info"></basicReady>
			<!-- 参赛选手信息 -->
			<view class="title">
				<text class="title_info">队员资料</text>
			</view>
			<customForm ref="formRef" bg="#fff" v-if="data.params.formList.length" :formList="data.params.formList"
				@change="formChange"></customForm>
			<!-- 协议 -->
			<!-- <agree ref="agreeRef" :html="data.info.treaty" :list="['参赛条款']"></agree> -->
		</view>
		<view class="bottom flex-space-between">
			<view class="price">{{ tools.isFree(data.info.price) }} </view>
			<view class="btn" @click="submit">立即报名</view>
		</view>
		<view v-if="data.showTrue">
			<u-popup v-model="data.showTrue" :mask-close-able="false"  mode="center" width="596rpx" height="396rpx"
				borderRadius="20">
				<view class="showTrue_title">填写验证码报名</view>
				<view class="showTrue_body">
					<u-input v-model="data.showTrueInput" type="text" border="true" placeholder="请输入赛事验证码"
						input-align="center" border-color="#2E64CE" style="width: 530rpx;" />
				</view>
				<view class="showTrue_b">
					<view class="btn_quxiao" @click="CancalSubmit">取消</view>
					<!-- <view class="line"></view> -->
					<view class="btn_queding" @click="sureSubmit">确定</view>
				</view>
			</u-popup>
		</view>
	</template>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { getGroupDetail ,checkCode} from '@/service/api/order'
	import tools from '@/utils/tools'
	import userPinia from '@/store/user'
	import agree from '@/components/entry/agree.vue'
	// import basic from '@/components/entry/basic.vue'
	import customForm from '@/components/form/custom.vue'
	import basicReady from '@/components/entry/basicReady.vue'
	const user = userPinia()
	const userInfo = JSON.parse(user.$state.userInfo)

	// 获取组件实例
	const formRef = ref(null)
	const agreeRef = ref(null)

	const data = reactive({
		// 0 多人 1 单人
		showTrue: true,
		showTrueInput: "",
		way: 1,
		info: {},
		params: {
			id: 0,
			team_id: 0,
			formList: []
		}
	})
	//验证码的取消
	const CancalSubmit = () => {
		uni.navigateBack()
	}
	// 验证码的确定
	const sureSubmit = async () => {
		if (data.showTrueInput) {
			const res = await checkCode({
				id: data.info.id,
				code: data.showTrueInput
			})
			if (res.code == 1) {
				data.showTrue = false
				data.params.code = data.showTrueInput
			} else {
				tools.showToast(res.msg)
			}
		} else {
			tools.showToast('请输入验证码')
		}
	}
	// 提交按钮
	const submit = () => {
		// const check = agreeRef.value.check
		// if (!check) return tools.showToast('请阅读并勾选协议')
		formRef.value.confirm()
	}
	// 表单参数回调
	const formChange = (e : { value : object[] }) => {
		data.params.formList = e.value
		tools.setStorage<string>('entryInfo', JSON.stringify(data))
		tools.navTo('/pagesA/entry/confirm')
	}

	// 获取表单数据
	const getGroupDetailApi = async () => {
		const { msg } = await getGroupDetail({ id: data.params.id, team_id: data.params.team_id })
		data.info = JSON.parse(JSON.stringify(msg))
		// 1 单人 2 多人 3 个人中心
		tools.setStorage<number>('entryType', 1)
		msg.sign_form.forEach((item : { type : number; value; model : string }) => {
			if (item.type == 3) item.value = ''
			// if (item.model == '姓名') {
			//   item.value = userInfo.name ?? ''
			// } else if (item.model == '手机号') {
			//   item.value = userInfo.mobile ?? ''
			// }
		})
		data.params.formList = JSON.parse(JSON.stringify(msg.sign_form))
		if(data.info.is_checking){
			data.showTrue=true
		}else{
			data.showTrue=false
		}
	}

	onLoad((option) => {
		var params = null
		if (option.params) {
			params = JSON.parse(option.params)
		} else {
			params = option
		}
		data.params.id = params.id
		data.params.team_id = Number(params.team_id)

		// 获取表单数据
		getGroupDetailApi()
	})
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f9f9f9;
		padding: 20rpx;
		padding-bottom: 150rpx;
	}

	.showTrue_title {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: #000000;
		padding-top: 46rpx;
	}

	.showTrue_body {
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 530rpx;
		margin-top: 56rpx;
	}

	.showTrue_b {
		border-top: 1rpx solid #EEEEEE;
		margin-top: 60rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.btn_quxiao {
			width: 100%;
			height: 110rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #000000;
			border-right: 1rpx solid #EEEEEE;
		}

		.btn_queding {
			width: 100%;
			height: 110rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #5062A7;
		}
	}

	.title {
		margin-top: 20rpx;
		background-color: #fff;
		padding: 34rpx 34rpx 30rpx 34rpx;

		// margin: 0 34rpx;
		.title_info {
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 44rpx;
			color: #5062A7;
			opacity: 1;
		}
	}

	.bottom {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 10;
		// height: 160rpx;
		position: fixed;
		background-color: #fff;
		// padding-bottom: 60rpx;
		padding-left: 30rpx;
		box-shadow: 0rpx -8rpx 12rpx rgba(0, 0, 0, 0.08);

		.price {
			height: 50rpx;
			display: flex;
			color: #e6425e;
			font-size: 40rpx;
			line-height: 50rpx;

			&::before {
				content: '总计：';
				color: #000000;
				font-size: 28rpx;
			}
		}

		.btn {
			color: #fff;
			height: 100rpx;
			width: 440rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 6rpx;
			background: linear-gradient(270deg, #354678 0%, #5062A7 100%);
		}
	}
</style>